<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>模拟select</title>
    <style>
        ul{
            padding:0px;
            margin:0px;
            list-style: none;
        }
        div{
            width:300px;
            height:500px;
            box-shadow: 0 0 2px orange;
            margin:50px auto;
        }
        .outer li{
            width:100px;
            height:40px;
            line-height:40px;
            text-align: center;
            border:1px solid #ccc;
        }
        .outer>li:first-child{
            background-color:green;
        }.outer>li:nth-of-type(2){
            background-color:#ccc;
        }
        .outer{
            display: flex;
        }
        .outer ul{
            display: none;
            position: relative;
            left:-1px;
        }
    </style>
</head>

<body>

    <div>
        <ul class="outer">
            <li>选择项目：</li>
            <li>
                <span>未选择</span>
                <ul>
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                    <li>jQuery</li>
                </ul>
            </li>
        </ul>
    </div>


<script src="./jquery.js">

</script>
</body>

</html>
<script>
    // console.dir($('span'));
    $('span').click(function(event){
        $(this).siblings().css('display','block');
        event.stopPropagation();
    })
    $('.outer ul li').mouseover(function(){
        $(this).css('background-color','#ccc').siblings().css('background-color','white');
    })
    $('.outer ul li').click(function(event){
        event.stopPropagation();
        // console.log($(this).html());
        $('span').html(this.innerHTML);
        $('.outer ul').css('display','none');    
    })
    $('body').click(function(){
         $('.outer ul').css('display','none');
    })
</script>